<template>
  <div class="person">
      <h1>人员信息组件</h1>
      <!-- 数据共享 -->
      <h3 style="color:red">count组件中当前num值为：{{$store.state.sum}}</h3>
      
      <input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button>
      <ul>
        <li v-for="p in personlist" :key="p.id">{{p.name}}</li>
      </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:'Person',
    data() {
      return {
        name:''
      }
    },
    computed:{
      personlist(){
        return this.$store.state.personlist
      }
    },
    methods:{
      add(){
        const perobj = {id:nanoid(),name:this.name}
        this.$store.commit('ADD_PER',perobj)
        // console.log(perobj)
        this.name = ''
      }
    }
}
</script>

<style>

</style>